<template>
  <div class="app-container">
    <baidu-map
      :scroll-wheel-zoom="true"
      class="map"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-label
        :label-style="{ color: 'red', fontSize: '16px' }"
        content="Keysight"
        :position="{ lng: 118.819254, lat: 31.952567 }"
        title=""
      />
      <!-- <bm-info-window
        :position="{ lng: 118.81911, lat: 31.952724 }"
        title=""
        :width="0"
        :height="0"
        :show="infoWindow.show"
        @close="infoWindowClose"
        @open="infoWindowOpen"
      >
        <p v-text="infoWindow.contents"></p>
      </bm-info-window> -->
      <!-- <bm-marker
        :position="markerPo"
        :dragging="true"
        :title="storeName"
        :z-index="999999999"
        :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
        @click="toBoxDetailChartView"
      ></bm-marker> -->
      <bm-marker
        v-for="item in markerInfos"
        :key="item.equid"
        :equid="item.equid"
        :position="{ lng: item.longitude, lat: item.latitude }"
        :icon="{
          url: require('@/assets/bmap/wuxiandian_pink.png'),
          size: { width: 64, height: 64 },
        }"
        @click="toBoxDetailChartView(item.mfid)"
      ></bm-marker>
    </baidu-map>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      markerPo: {
        lng: 0,
        lat: 0,
      },
      infoWindow: {
        show: true,
        contents: 'Keysight'
      },
      markerIcon: '',
      storeName: '',
      markerInfos: [],
      center: { lng: 0, lat: 0 },
      zoom: 3
    }
  },
  mounted () {

  },
  methods: {
    handler ({ BMap, map }) {
      // console.log(BMap, map)
      //center坐标设置为nate公司地址 数据来自baidu文档坐标拾取工具 118.818903,31.95277
      this.center.lng = 118.818903
      this.center.lat = 31.95277
      this.zoom = 19
      this.boxInfo()
    },
    // infoWindowClose (e) {
    //   this.infoWindow.show = false
    // },
    // infoWindowOpen (e) {
    //   this.infoWindow.show = true
    // },
    // showInfoWindow (mfid) {
    //22040001140006的设备是keysight的仪器
    //   if (mfid == '22040001140006') {
    //     this.infoWindowOpen()
    //   }
    // },
    boxInfo () {
      axios.get('http://47.118.20.181:8080/box').then(response => {
        if (Object.keys(response.data).length != 0) {
          console.log('盒子设备的信息 -> ', JSON.stringify(response.data))
          this.markerInfos = response.data
        }
        else {

        }
      })
    },
    toBoxDetailChartView (mfid) {
      console.log('当前设备站id -> ', mfid)
      //传参并跳转到纳特平台界面
      this.$router.replace({
        path: '/platformPlay/nate',
        query: {
          mfid: mfid
        }
      })

    },
  }
}
</script>
<style lang="less" scoped>
.map {
  width: 100%;
  height: 80vh;
}
</style>